<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>传智搜索</title>
    <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
    <style type="text/css">
        .content {
            width: 643px;
            margin: 200px auto;
            text-align: center;
        }

        input[type='text'] {
            width: 530px;
            height: 40px;
            font-size: 14px;
        }

        input[type='button'] {
            width: 100px;
            height: 46px;
            background: #38f;
            border: 0;
            color: #fff;
            font-size: 15px
        }

        .show {
            position: absolute;
            width: 535px;
            border: 1px solid #999;
            border-top: 0;
            display: none;
        }
    </style>

</head>
<body>
<div class="content">
    <!--传智播客图片-->
    <img alt="" src="logo.png"><br/><br/>
    <!--搜索输入框-->
    <input type="text" id="search" name="keyword">
    <!--搜索按钮-->
    <input type="button" value="搜索一下">
    <!--提示展示框-->
    <div class="show"  id="show" ></div>
</div>

</body>
<script type="text/javascript">
    // 完成 键盘弹起事件的绑定
    $("#search").keyup(function(){
        //触发函数
        //  就是先获取 搜索框的内容
        var keyword = $("#search").val();//你录了张 获取张
        //健壮性 就是 是不是空
        if(keyword.trim()==""){//说明没有内容
            return;
        }
        //录入 发起ajax请求
        var url = "/day09/search";
        var data = "keyword="+keyword;
        //发起请求
        $.get(url,data,function(data){
            //data返回的数据  响应回来的数据
            // data什么样子  ["张三","张三丰","张三四","张全蛋"]
            //需要进行拼接 拼接到show下拉框中
            //下面代码 你们复制粘贴也可以  看懂我写的 跟我的思路
            var str="";

            //遍历 data数据     然后遍历的每一次执行function 方法
            //                 索引   名字
            $.each(data,function(index,name){
                str += "<div onmouseover='fun1()' onmouseout='fun2()' onclick='fun3()'>"+name+"</div>"
            })
            //有几个拼接了几个之后 要把拼接出来的div放到展示框中
            $("#show").html(str);
            // 展示这个框
            $("#show").show();

        },"json");

    });

    // 背景变灰
    function fun1(obj){
        $(obj).css("background-color","gray");
    }
   //背景变白
    function  fun2(obj) {
        $(obj).css("background-color","white");
    }
    //选中方法
    function  fun3(obj) {
        $("#search").val( $(obj).text());
        $("#show").hide();
    }

</script>
</html>